<template>
    <van-swipe-cell v-for="i in store.data">
        <van-card :price="i.shuju.goods_price" :desc="i.shuju.goods_name" :thumb="i.shuju.goods_big_logo">
            <template #num>
                <van-stepper v-model="i.number" />
            </template>
            <template #tag>
                <van-checkbox v-model="i.checked"></van-checkbox>
            </template>
        </van-card>
        <template #right>
            <van-button square text="删除" type="danger" class="delete-button" style="height: 100%;"
                @click="shanchu(i.id)" />
        </template>
    </van-swipe-cell>

    <van-submit-bar style="margin-bottom: 45px;position: fixed;" :price="price" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checkedok"></van-checkbox>
        <van-button type="danger">批量删除</van-button>
    </van-submit-bar>
</template>

<script setup>
import { showToast } from 'vant';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = new useRouter()

import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
// 删除
let shanchu = (id) => {
    showToast('删除成功');
    store.deldata(id)
}
let img = ref('https://tse3-mm.cn.bing.net/th/id/OIP-C.D_C_amMy2hvIob0oYVelSAAAAA?w=174&h=178&c=7&r=0&o=5&dpr=1.5&pid=1.7');
let checkedok =computed({
    get(){
        if (store.data.length == 0) {
            return false
        }
        else {
            return store.data.every(i => i.checked)
        }
    },
    set(val){
        store.data.forEach(i=>i.checked=val)
    }
})
    let price = computed(() => {
    let he = 0;
    let checkedok = store.data.filter(item => item.checked);
    checkedok.forEach((item) => {
        he += item.number * item.shuju.goods_price;
    })
    return he * 100
})

</script>

<style lang="scss" scoped></style>